<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <style>
        .ys1 {
            width: 300px;
            height: 200px;
            background-color: pink;
        }
        .ys2 {
            width: 300px;
            height: 200px;
            background-color: #1067ff;
        }
        .ys3 {
            width: 300px;
            height: 200px;
            background-color: #67ff27;
        }

    </style>

</head>
<body>
<div id="app">
    <button @click="info='ys1'">点粉色</button>
    <button @click="info='ys2'">点蓝色</button>
    <button @click="info='ys3'">点绿色</button>
    <button @click="info=''">点取消</button>

    <div v-bind:class="info">
        我是div
    </div>
</div>

<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {

            info: ""

        }

    })
</script>
</body>
</body>
</html>